We will be creating four different versions of a slideshow using the exact same layout for each. While every effort was made to make each version independent, it is best to do all versions if time permits so that you can benefit from a previous version layout and code. More importantly, each version build upon the previous version.
An Array version (internal data) | An Object version (internal data) | An XML version (external data) | An PHP version (external data) |
The first version we will be creating will use an array with references to images in the images folder.
//STEP 1: Create array and populate it to hold slide names ==================== var imageArray:Array = ["crosscountry","mountainbike","runners","skater","snowboarder","surfer","windsurfer1","windsurfer2"]; trace ("What is in imageArray? " + imageArray); // Set initial value for slide index var currentSlideIndex:Number = 0; //STEP 2: Set up properties for first slide =================================== var firstSlide:String = imageArray[0]; trace ("What is first slide? " + firstSlide); imageLoader.source = "images/" + firstSlide + ".jpg"; caption_txt.text = imageArray[0]; //STEP3: Set up previous and next buttons ===================================== previous_btn.addEventListener (MouseEvent.MOUSE_DOWN, onPrevious); function onPrevious (eventObject:MouseEvent):void { if (currentSlideIndex > 0) { currentSlideIndex--; imageLoader.source = ("images/" + imageArray[currentSlideIndex] + ".jpg"); caption_txt.text = imageArray[currentSlideIndex]; } } next_btn.addEventListener (MouseEvent.MOUSE_DOWN, onNext); function onNext (eventObject:MouseEvent):void { if (currentSlideIndex < imageArray.length - 1) { currentSlideIndex++; imageLoader.source = ("images/" + imageArray[currentSlideIndex] + ".jpg"); caption_txt.text = imageArray[currentSlideIndex]; } }
The extension "*.jpg" is NOT used in the array so that the images and caption can SHARE the same data. As a result, it is added to the end of the imageLoader variable string (i.e., imageLoader.source = "images/" + firstSlide + ".jpg";). Remember, an array has a zero-based index so the starting value uses zero instead of one for the currentSlideIndex and the imageArray (i.e., var currentSlideIndex:Number = 0;, var firstSlide:String = imageArray[0];)
This version is similar to the array version; however, it uses an object to populate the references to the images.
//STEP 1: Create object and populate it to hold slide names ==================== var imageObject:Object = {slide1:"crosscountry", slide2:"mountainbike", slide3:"runners", slide4:"skater", slide5:"snowboarder", slide6:"surfer", slide7:"windsurfer1", slide8:"windsurfer2"}; trace ("What is first element in imageObject? " + imageObject["slide1"]); var slideTotal:Number = 0; //Ascertain number of slides by looping through object for (var prop in imageObject) { trace("imageObject."+prop+" = "+imageObject[prop]); slideTotal++ } trace("Total number of slides is: " + slideTotal) // Set initial value for slide index var currentSlideIndex:Number = 1; //STEP 2: Set up properties for first slide =================================== var firstSlide:String = imageObject["slide1"]; trace ("What is first slide? " + firstSlide); imageLoader.source = "images/" + firstSlide + ".jpg"; caption_txt.text = imageObject["slide1"]; //STEP3: Set up previous and next buttons ===================================== previous_btn.addEventListener (MouseEvent.MOUSE_DOWN, onPrevious); function onPrevious (eventObject:MouseEvent):void { if (currentSlideIndex > 1) { currentSlideIndex--; imageLoader.source = ("images/" + imageObject["slide"+currentSlideIndex] + ".jpg"); caption_txt.text = imageObject["slide"+currentSlideIndex]; } } next_btn.addEventListener (MouseEvent.MOUSE_DOWN, onNext); function onNext (eventObject:MouseEvent):void { if (currentSlideIndex < slideTotal) { currentSlideIndex++; imageLoader.source = ("images/" + imageObject["slide"+currentSlideIndex] + ".jpg"); caption_txt.text = imageObject["slide"+currentSlideIndex]; } }
A for...in loop is used to ascertain the number of "elements" in the object so that it can be used in the next_btn code later (i.e., if (currentSlideIndex < slideTotal)). Notice that the code starts with one instead of zero because an object does not have a zero-based index like an array. Note also that an object accept a string value instead of a number value so the word "slide" in appended to the code (i.e., ["slide"+currentSlideIndex]) to ascertain the current slide index.
This code is basically the same as the SlideShow_Object and SlideShow_Array versions except that it uses an EXTERNAL XML FILE and an INTERNAL XML OBJECT.
//Create XML object and populate it with slides.xml ==================== var loader:URLLoader = new URLLoader(); loader.load (new URLRequest("slides.xml")); loader.addEventListener (Event.COMPLETE, onDataLoad); // Set initial value for slide index; var currentSlideIndex:Number = 0; var applicationData:XML; var totalSlides:Number function onDataLoad (eventObject:Event):void { applicationData = new XML(eventObject.target.data); trace (applicationData); totalSlides = applicationData.slide.length(); trace ("totalSlides =" + totalSlides); //Set up properties for first slide ================================ var firstSlide:String = applicationData.slide. @ slide_name[0]; trace ("What is first slide? " + firstSlide); imageLoader.source = "images/" + firstSlide; caption_txt.text = applicationData.slide. @ slide_caption[0]; } //Previous button ===================================== previous_btn.addEventListener (MouseEvent.MOUSE_DOWN, onPrevious); function onPrevious (eventObject:MouseEvent):void { if (currentSlideIndex > 0) { currentSlideIndex--; imageLoader.source = ("images/" + applicationData.slide.@slide_name[currentSlideIndex]); caption_txt.text = applicationData.slide. @ slide_caption[currentSlideIndex]; } } //Next button ========================================================= next_btn.addEventListener (MouseEvent.MOUSE_DOWN, onNext); function onNext (eventObject:MouseEvent):void { if (currentSlideIndex < totalSlides - 1) { currentSlideIndex++; imageLoader.source = ("images/" + applicationData.slide.@slide_name[currentSlideIndex]); caption_txt.text = applicationData.slide. @ slide_caption[currentSlideIndex]; } }
<?xml version="1.0" encoding="utf-8"?>
<slideshow>
<slide slide_name="crosscountry.jpg" slide_caption="cross country" />
<slide slide_name="freestyle.jpg"slide_caption="freestyle" />
<slide slide_name="mountainbike.jpg"slide_caption="mountain bike" />
<slide slide_name="runners.jpg"slide_caption="runners" />
<slide slide_name="skater.jpg"slide_caption="skater" />
<slide slide_name="snowboarder.jpg"slide_caption="snow boarder" />
<slide slide_name="surfer.jpg"slide_caption="surfer" />
<slide slide_name="windsurfer1.jpg"slide_caption="wind surfer1"/>
<slide slide_name="windsurfer2.jpg"slide_caption="wind surfer2"/>
</slideshow>
NOTES: It is important to note that several variables are declared and created OUTSIDE of the onDataLoad event handlers so that they can be treated as GLOBAL variables. (i.e., var currentSlideIndex:Number = 0; var applicationData:XML; var totalSlides:Number).
Creating a version of the slideshow that is database driven requires three steps:
//Create XML object and populate it with slides.xml ==================== var loader:URLLoader = new URLLoader(); loader.load (new URLRequest("http://localhost/SlideShow/slides.php")); loader.addEventListener (Event.COMPLETE, onDataLoad); // Set initial value for slide index; var currentSlideIndex:Number = 0; var applicationData:XML; var totalSlides:Number function onDataLoad (eventObject:Event):void { applicationData = new XML(eventObject.target.data); trace (applicationData); totalSlides = applicationData.slide.length(); trace ("totalSlides =" + totalSlides); //Set up properties for first slide ================================ var firstSlide:String = applicationData.slide. @ slide_name[0]; trace ("What is first slide? " + firstSlide); imageLoader.source = "images/" + firstSlide; caption_txt.text = applicationData.slide. @ slide_slide_caption[0]; } //Previous button ===================================== previous_btn.addEventListener (MouseEvent.MOUSE_DOWN, onPrevious); function onPrevious (eventObject:MouseEvent):void { if (currentSlideIndex > 0) { currentSlideIndex--; imageLoader.source = ("images/" + applicationData.slide.@slide_name[currentSlideIndex]); caption_txt.text = applicationData.slide. @ slide_caption[currentSlideIndex]; } } //Next button ========================================================= next_btn.addEventListener (MouseEvent.MOUSE_DOWN, onNext); function onNext (eventObject:MouseEvent):void { if (currentSlideIndex < totalSlides - 1) { currentSlideIndex++; imageLoader.source = ("images/" + applicationData.slide.@slide_name[currentSlideIndex]); caption_txt.text = applicationData.slide. @ slide_caption[currentSlideIndex]; } }
Will we create a mySQL database using phpMyAdmin and then create a table in the database and populate it with data the refer to the images in the image folder.
We have included three versions of how to create a PHP file to generate an XML file. You only need to use one of these, but it is best to see the different between them.
Open Dreamweaver to create PHP file:
crosscountry.jpg freestyle.jpg mountainbike.jpg runners.jpg
The advantage of using version 2 is that Dreamweaver will write all of the code for you. In addition, the XML file can be readily seen in the browser without having to use View Source.
Open Dreamweaver to create PHP file:
If you prefer to use nested elements instead of element's attributes to create an XML file or if you want to see "how" Flash parse nested elements, you can use this version. This version depends on you doing version 2 first and making the following changes.
//Create XML object and populate it with slides.xml ==================== var loader:URLLoader = new URLLoader(); loader.load (new URLRequest("http://localhost/SlideShow/slides_v3.php")); loader.addEventListener (Event.COMPLETE, onDataLoad); // Set initial value for slide index; var currentSlideIndex:Number = 0; var applicationData:XML; var totalSlides:Number function onDataLoad (eventObject:Event):void { applicationData = new XML(eventObject.target.data); trace (applicationData); totalSlides = applicationData.slide.length(); trace ("totalSlides =" + totalSlides); //Set up properties for first slide ================================ var firstSlide:String = applicationData.slide.slide_name[0]; trace ("What is first slide? " + firstSlide); imageLoader.source = "images/" + firstSlide; caption_txt.text = applicationData.slide.slide_slide_caption[0]; } //Previous button ===================================== previous_btn.addEventListener (MouseEvent.MOUSE_DOWN, onPrevious); function onPrevious (eventObject:MouseEvent):void { if (currentSlideIndex > 0) { currentSlideIndex--; imageLoader.source = ("images/" + applicationData.slide.slide_name[currentSlideIndex]); caption_txt.text = applicationData.slide.slide_caption[currentSlideIndex]; } } //Next button ========================================================= next_btn.addEventListener (MouseEvent.MOUSE_DOWN, onNext); function onNext (eventObject:MouseEvent):void { if (currentSlideIndex < totalSlides - 1) { currentSlideIndex++; imageLoader.source = ("images/" + applicationData.slide.slide_name[currentSlideIndex]); caption_txt.text = applicationData.slide.slide_caption[currentSlideIndex]; } }
Add info here...